---
import Analytics from "../components/Analytics/Analytics.astro";
export interface Props {
	title: string;
}

export interface BaseLayoutProps extends Props {
	permalink?: string;
	title?: string;
	description?: string;
}

const { permalink = '', title = "Driver.js", description = "A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page." } = Astro.props;

---

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />

		<title>{ title }</title>
		<meta name="robots" content="index,follow"/>
		<meta name="description" itemprop="description" content={description}/>

		<link href={`https://driverjs.com${permalink}`} rel="canonical">

		<meta content="Kamran Ahmed" name=author>
		<meta content="summary_large_image" name="twitter:card">
		<meta content="@kamrify" name="twitter:creator">
		<meta content="1200" property="og:image:width">
		<meta content="630" property="og:image:height">
		<meta content="https://driverjs.com/og-img.png" property="og:image">
		<meta content="driverjs.com" property="og:image:alt">
		<meta content="driverjs.com" property="og:site_name">
		<meta content="Driver.js" property="og:title">
		<meta content="A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page." property=og:description>
		<meta content="website" property="og:type">
		<meta content="https://driverjs.com/" property="og:url">

		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

		<style is:global>
			.driver-popover.driverjs-theme {
				background-color: #fde047;
				color: #000;
			}

			.driver-popover.driverjs-theme .driver-popover-title {
				font-size: 20px;
			}

			.driver-popover.driverjs-theme .driver-popover-title,
			.driver-popover.driverjs-theme .driver-popover-description,
			.driver-popover.driverjs-theme .driver-popover-progress-text {
				color: #000;
			}

			.driver-popover.driverjs-theme button {
				flex: 1;
				text-align: center;
				background-color: #000;
				color: #ffffff;
				border: 2px solid #000;
				text-shadow: none;
				font-size: 14px;
				padding: 5px 8px;
				border-radius: 6px;
			}

			.driver-popover.driverjs-theme button:focus, .driver-popover.driverjs-theme button:hover {
				background-color: #424242;
				color: #ffffff;
			}

			.driver-popover.driverjs-theme .driver-popover-navigation-btns {
				justify-content: space-between;
				gap: 3px;
			}

			.driver-popover.driverjs-theme .driver-popover-close-btn {
				color: #9b9b9b;
			}

			.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
				color: #000;
			}

			.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
				border-left-color: #fde047;
			}

			.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
				border-right-color: #fde047;
			}

			.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
				border-top-color: #fde047;
			}

			.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
				border-bottom-color: #fde047;
			}
		</style>
	</head>
	<body>
		<slot />
        <Analytics />
	</body>
</html>